import BasicWidget from "./BasicWidget"

const _getWidgetProps = (widgetProps) => {
  return widgetProps || {
    text: "确定",
    type: "primary",
    size: "small",
    colspan: 3,
    plain: false,
    round: false,
  }
}

const widgetPropDescribe = {
  text: {
    type: "input",
    name: "按钮文字"
  },
  type: {
    type: "select",
    name: "按钮类型",
    options: ["primary", "success", "warning", "danger", "info", "text"]
  },
  size: {
    type: "select",
    name: "按钮大小",
    options: ["medium", "small", "mini"]
  },
  colspan: {
    type: "number",
    name: "栅格数",
    min: 1,
    max: 24
  },
  plain: {
    type: "switch",
    name: "朴素按钮"
  },
  round: {
    type: "switch",
    name: "圆角按钮"
  },
}

export default class Button extends BasicWidget {
  constructor(widgetProps) {
    super(_getWidgetProps(widgetProps), widgetPropDescribe);
    this.tag = "el-button";
    this.key = Symbol(this.tag);
    this.defaultValue = 50;
  }
  /**
   * 生成组件的 html 代码
   * @param {number} index 当前组件在 selectedWidgets 里的索引
   * @returns 
   */
  createWidgetHtml(index, editting, parentId) {
    this.index = index;
    this.parentId = parentId;
    const {
      text,
      type,
      size,
      colspan,
      plain,
      round
    } = this.getWidgetProps()
    return (
      editting ?
      `<el-col
        :span=${colspan}
        id=${this.id}
        data-parentid=${parentId || "ultrame-canvas"}
        data-idx=${index}
        class="ultrame-form-item-box"
        data-action="move"
        draggable="true">
        <div class="inputContainer">
          <${this.tag}
            type=${type}
            size=${size}
            :plain=${plain}
            :round=${round}>
            ${text}
          </${this.tag}>
        </div>
      </el-col>` :
      `<el-col :span=${colspan}>
        ${this.createPureWidgetHtml()}
      </el-col>`
    )
  }
  createPureWidgetHtml() {
    const {
      text,
      type,
      size,
      plain,
      round
    } = this.getWidgetProps()
    return (
      `<el-form-item>
        <${this.tag} 
          type=${type}
          size=${size}
          :plain=${plain}
          :round=${round}
          @click="this.handleClick">
            ${text}
        </${this.tag}>
      </el-form-item>`
    )
  }
}